<template>
  <div>
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 搜索 -->
      <div>
        as
      </div>
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索 -->
          <el-input
            placeholder="请输入内容"
            v-model="queryInfo.query"
            clearable
            @clear="getUsersLists"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="searchUsers"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible = true"
            >添加用户</el-button
          >
        </el-col>
      </el-row>
      <MyTable :tableConfig="tableConfig" :tableData="tableData">
        <template v-slot:mgState="slotData">
          <el-switch
            v-model="slotData.data.mg_state"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </template>
        <template v-slot:option="slotData">
          <el-button type="primary" size="mini" @click="edit(slotData.id)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="edit(slotData.id)"
            >删除</el-button
          >
          <el-button type="warning" size="mini" @click="edit(slotData.id)"
            >分配角色</el-button
          >
        </template>
      </MyTable>
      <Pagination
        :paginationConfig="paginationConfig"
        @paginationChange="paginationChange"
      />
    </el-card>
  </div>
</template>
<script>
import MyTable from '@/components/table'
import Pagination from '@/components/pagination'
import { getUsersList } from '@/api/users'
export default {
  name: 'CeShi',
  components: { MyTable, Pagination },
  data() {
    return {
      tableConfig: {
        thead: [
          {
            prop: 'id',
            label: 'id'
          },
          {
            prop: 'role_name',
            label: '角色名'
          },
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'create_time',
            label: '创建时间'
          },
          {
            prop: 'username',
            label: '用户名'
          },
          {
            prop: 'mobile',
            label: '手机号'
          },
          {
            prop: 'mg_state',
            label: '状态',
            type: 'slot',
            slotName: 'mgState',
            width: '100'
          },
          {
            label: '操作',
            type: 'slot',
            slotName: 'option',
            width: '250'
          }
        ]
      },
      checkBox: true,
      tableData: [],
      paginationConfig: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 0
      },
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 10
      }
    }
  },
  watch: {
    tableData: {
      immediate: true,
      deep: true,
      handler() {}
    },
    paginationConfig: {
      deep: true,
      handler() {}
    }
  },
  created() {
    this.getUsersLists()
  },
  methods: {
    getUsersLists() {
      getUsersList(this.queryInfo).then((res) => {
        this.tableData = res.data.data.users
        this.paginationConfig.total = res.data.data.total
      })
    },
    paginationChange(params) {
      if (Object.keys(params)[0] === 'currentPage') {
        this.queryInfo.pagenum = params.currentPage
      } else {
        this.queryInfo.pagesize = params.pageSize
      }
      this.getUsersLists()
    },
    searchUsers() {
      this.queryInfo.pagenum = 1
      this.getUsersLists()
    },
    edit(a) {
      alert(a)
    }
  }
}
</script>
<style lang='less' scoped>
.el-card {
  margin: 10px;
}
</style>
